<template>
	<view class="pb-120" v-if="info">
		<view class="flex1 plr-36 pb-10 bb">
			<view class="img">
				<image :src="info.cover" mode=""></image>
			</view>
			<view class="ml-30 ptb-10">
				<view class="bold mtb-20 u-line-2">
					{{info.title}}
				</view>
				<view class="size-26">
					库存 {{info.inventory}} {{info.unit}}
				</view>
				<view class="size-26 gray-2">
					销量 {{info.sales_count}} {{info.unit}}
				</view>
			</view>
		</view>
		<view class="ml-36 pr-36 ptb-20">
			<view class="size-34 bold mb-20">
				图文详情
			</view>
			<view class="u-content">
				<u-parse :html="info.content" :show-with-animation="true" :lazy-load="true" :domain="domain"></u-parse>
			</view>
		</view>
		<view class="fixed-bottom plr-36 bg-white flex" style="box-shadow: 0px -2px 6px rgba(238, 238, 238, 0.68);">
			<view class="flex1 flex-middle">
				<view class="red">
					<text class="size-26">积分</text>
					<text class="size-40 bold">{{info.integral}}</text>
				</view>
				<view class="size-26 ml-20 gray-2">
					原价
					<text class="ml-10" style="text-decoration: line-through;">￥{{info.original_price}}</text>
				</view>
			</view>
			<view class="bold bg-yellow ptb-9 plr-20 radius-10 white" @click="goOrder">
				立即兑换
			</view>
		</view>
	</view>
</template>

<script>
	import { baseUrl } from '@/common/http';
	export default {
		data() {
			return {
				domain: baseUrl,
				id: null,
				info: null
			};
		},
		onLoad(option) {
			this.id = option.id
			this.init();
		},
		methods: {
			init() {
				this.$http('/api/integralgoods/detail', {
					id: this.id
				}).then(data => {
					this.info = data
					uni.setNavigationBarTitle({
						title: data.title
					});
				})
			},
			goOrder() {
				uni.navigateTo({
					url: '/pages/home/integral-order?goods_id=' + this.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.img {
		image {
			width: 200rpx;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}

	.img-shop {
		image {
			width: 34rpx;
			height: 34rpx;
		}
	}

	.fixed-bottom {
		height: 120rpx;
	}
</style>
